<template>
  <div>
    <h3 ref="info">歌词：{{ lyric }}</h3>
    <button ref="btn" @click="showDomRefInfo">点我展示 DOM 信息</button>
    <hr />
    <Singer ref="sing"></Singer>
  </div>
</template>

<script>
//导入组件
import Singer from "./Singer";
export default {
  name: "Song",
  data() {
    return {
      lyric: "不如见一面，哪怕是一眼"
    };
  },
  methods:{
    showDomRefInfo(){
      console.log("info=",this.$refs.info);//真实DOM元素
      console.log("btn=",this.$refs.btn);//真实DOM元素
      console.log("sing=",this.$refs.sing);//Singer 组件的实例对象（vc）
    }
  },
  //引入其它组件
  components: {
    Singer
  },
};
</script>

<style>
</style>